<template>
  <div>
    <el-container>
      <!-- Header -->
      <el-header>
        <vHeader :title="title" :subTitle="subTitle" />
      </el-header>
      <!-- Content -->
      <!-- 为了不影响布局，slot放在el-main标签内 -->
      <el-main :class="sceneid=='sstbg'?'el-main-vertical':'el-main-horizontal'">
        <el-row v-if="sceneid=='sstbg'" style="height:768px;width:100%;">
      <vVideoPlayer/>
        </el-row>
        <el-row
          :class="sceneid=='sstbg'?'el-row-vertical':'el-row-horizontal'"
          :style="sceneid=='sstbg'?'':'padding:0 60px;'"
        >
          <slot name="customContent"></slot>
        </el-row>
      </el-main>
      <!-- Footer -->
      <el-footer>
        <vFooter />
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import { commonPost } from "@api/data";

export default {
  name: "CommonPage",
  data() {
    return {
      sceneid: this.$store.state.terminfo.seceninfo.sceneid,
      
    };
  },
  props: {
    title: String,
    subTitle: String
  },
  
};
</script>
<style scoped>
.el-main-horizontal {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(#2888ef, #59cbff);
  overflow: hidden;
}
.el-main-vertical {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 60px;
  background-image: linear-gradient(#2888ef, #59cbff);
  overflow: hidden;
}
.el-row-horizontal {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.el-row-vertical {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.el-container {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
.el-header {
  background-color: #2888ef;
}
.el-footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>
